<template>
  <div class="item">
    <img v-if="isShowImg" :src="ereData.src" />
    <div class="item-detail" :style="totalStyle">
      <div class="item-detail-num">
        <div class="title" :style="titleStyle" style="white-space: nowrap">
          {{ ereData.name }} <span>({{ ereData.unit }})</span>
        </div>
        <div class="num">
          <my-tooltip :numData="numData1" :popData="popData1"  tooltipBoxStyle="left: -50px;top:15px;width: 150px"/>
          <!-- <CountTo
            style="color: #44efff; font-size: 16px"
            :startVal="startVal"
            :endVal="ereData.num"
            :duration="duration"
            :decimals="ereData.fixed"
          /> -->
         
        </div>
      </div>

      <!-- <div class="icon" :style="iconStyle" style="margin-left: 60px">
        <div>{{ isIcon ? "占比" : "同比" }}</div>
        <div class="num">
          <span>{{ ereData.radio }}%</span>-->
          <!-- <CountTo :startVal="startVal" :endVal="ereData.radio" :duration="duration" />% -->
          <!-- <img
            src="../../assets/regulation/arrup.png"
            class="arrawtransform"
            v-if="ereData.isTrend && !isIcon"
          />
          <img
            src="../../assets/regulation/arrdown.png"
            class="arrawtransform"
            v-if="!ereData.isTrend && !isIcon"
          />
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    ereData: {},
    isIcon: {},
    iconStyle: {},
    // 是否显示图标
    isShowImg: {
      type: Boolean,
      default: true,
    },
    // 整体样式
    totalStyle: {},
    // 标题样式
    titleStyle: {},
  },
  data() {
    return {
      startVal: 0,
      duration: 3000,
      numData1: {},
      popData1: [],
    };
  },
  components: {},
  watch:{
    ereData:{
      handler (val, old) {
        console.log(this.ereData,"ereData")
        this.init()
      },
      immediate: true,
      deep:true
      

     
    }
  },
  mounted() {
    
    //this.init()
  },
  beforeDestroy() {},
  methods: {
    init(){
      
      var that=this;
      
      that.numData1 = {
            num: that.ereData.num,
            decimals: 0,
            suffix: "",
      };
      that.popData1 = [
            {
              label: "占比",
              value: that.ereData.radio,
              // imgSrc:
              //   that.NewXzxk.homeAmplify > 0
              //     ? require("../../assets/common-new/red-top.png")
              //     : require("../../assets/common-new/green-down.png"),
              unit: "%",
              color:
                 "main-color",
            },
            
          ];
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/qjzl.scss";

.item {
  flex: 1;
  flex-shrink: 0;
  height: 60px;
  display: flex;
  justify-content: left;
  align-items: center;

  .item-detail {
    display: flex;
    justify-content: center;
    .item-detail-num {
      margin-left: 6px;
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      width: 80px;

      .num {
        white-space: nowrap;
        font-size: 16px;
        color: #34effe;
        text-align: center;
        span {
          color: #fff;
          font-size: 12px;
          padding-left: 5px;
        }
      }
    }

    .icon {
      flex-shrink: 0;
      margin-left: 8px;
      font-size: 14px;
      margin-top: 4px;

      .num {
        display: flex;
        color: #34effe;
        margin-left: 5px;
        vertical-align: bottom;
        img {
          margin-left: 3px;
          width: 8px;
          height: 12px;
          flex-shrink: 0;
          margin-top: 2px;
        }
      }
    }
  }
}
</style>
